<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://chst.vip:8081/vue.js"></script>
</head>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" v-model="key" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="checkAll" value="all">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) of cart" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checkedArr" :value="item">
                    </td>
                    <td>
                        <img :src="item.imgSrc" alt="" width="50" height="50">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrement(item)">-</button>
                        &nbsp;
                        <b> {{item.count}}</b>
                        &nbsp;
                        <button @click="increment(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <!-- 动态生成内容tr -->
            </table>
            <div class="add" style="text-align: center;" v-show="!cart.length">没有更多数据了</div>
            <div style="text-align: right;">
                <h1>
                    结算:{{total_fee | toFix(2)}}
                </h1>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    //需求
    //1.根据数据,将表格动态创建出来

    //2.实现添加功能

    //3.实现删除功能

    //4.点击按钮可以实现数量的加减

    //5.选中商品,对商品进行价格的计算

    //一个使用v-model的技巧
    //批量创建出来的表单元素,比如checkbox,使用v-model的时候,要赋值一个数组,并且要绑定value属性
    const vm = new Vue({
        el: "#app",
        data: {
            allCheck: "",
            code: "",//产品编号
            productName: "",//产品名称
            imgSrc: "",//产品图片地址
            price: "",//价格
            checkedArr: [],
            key: "",//搜索条件
            oldCart: [],
            cart: []
            // cart: [
            //     {
            //         id: 1,
            //         code: 1,
            //         imgSrc: "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
            //         productName: "坤坤的背带裤",
            //         price: 9.9,
            //         count: 1
            //     },
            //     {
            //         id: 2,
            //         code: 2,
            //         imgSrc: "https://tse3-mm.cn.bing.net/th/id/OIP-C.U2zPWJK7Gus24zXyQWwi0AHaEG?pid=ImgDet&rs=1",
            //         productName: "品如的衣服",
            //         price: 19.9,
            //         count: 1
            //     },
            //     {
            //         id: 3,
            //         code: 3,
            //         imgSrc: "https://static1.paizi.com/uploadfile/2018/0710/20180710095354871.jpg",
            //         productName: "秀儿的秋裤",
            //         price: -9.9,
            //         count: 1
            //     },
            // ]
        },
        created() {
            // localStorage.setItem('qf-goods',JSON.stringify(this.cart))
            //从localStorage中取出数据
            let result = localStorage.getItem("qf-goods") || "[]"
            let result1 = localStorage.getItem("qf-checkedArr") || "[]" 
            // console.log(result1);
            this.checkedArr = JSON.parse(result1)//获取勾选数据
            // console.log(this.checkedArr);
            this.cart = JSON.parse(result) //获取的是购物车完整数据
            this.oldCart = [...this.cart] //浅拷贝
        },
        filters: {
            toFix(input, fix = 2) {
                // console.log(input)
                // console.log(fix)
                return input.toFixed(fix)
            }
        },
        updated() {
            // console.log(this.cart);
            localStorage.setItem("qf-goods", JSON.stringify(this.cart))
            localStorage.setItem("qf-checkedArr", JSON.stringify(this.checkedArr))
            
        },
        computed: {
            //reduce 函数柯里化
            total_fee() {
                return this.checkedArr.reduce((total, item) => total + item.price * item.count, 0);
            }
        },
        methods: {
            //全选
            checkAll(e) {
                let checked = e.target.checked;
                if (checked) {
                    //全选
                    this.checkedArr = this.cart;
                } else {
                    this.checkedArr = []
                }
            },
            //点击购物车中的加减按钮触发的回调函数
            increment(item) {
                // console.log(item)
                item.count++
            },
            decrement(item) {
                // 当item.count小于=1的时候,就不做操作了
                if (item.count <= 1) {
                    return
                }
                item.count--
            },
            //增加
            add() {
                //定义这样一个对象,添加到cart数组中
                // {
                //     id: 1,
                //     code:1,
                //     imgSrc:"https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1",
                //     productName: "坤坤的背带裤",
                //     price: 9.9,
                //     count: 1
                // },

                //添加之前要进行非空验证

                if (!this.code || !this.productName || !this.price) {
                    alert("编号 产品名称 价格必填")
                    return
                }


                let obj = {
                    id: Math.random().toString(32).substr(2),
                    code: this.code,
                    imgSrc: this.imgSrc,
                    productName: this.productName,
                    price: this.price,
                    count: 1
                }

                this.cart.push(obj)
                this.oldCart.push(obj)

                //存到本地
                // localStorage.setItem("qf-goods",JSON.stringify(this.cart))
            },
            del(index) {
                //通过id来删除数组中的内容
                // console.log(id)//1
                // this.cart =  this.cart.filter(item => item.id !== id)
                let res = this.cart.splice(index, 1);
                // console.log(res)
                this.checkedArr = this.checkedArr.filter(item => item.id !== res[0].id)
            }
        },


        watch: {
            checkedArr(newVal) {
                console.log(newVal)
                if (newVal.length === this.cart.length) {
                    this.allCheck = "all"
                } else {
                    this.allCheck = ""
                }
                // console.log(newVal);
                
            },
            key(newVal) {
                // console.log(newVal)
                //用newVal去数据中(cart)搜索每一个对象中的产品名称字段,通过indexOf检索,使用filter返回检索的结果不等于-1的选项

                let res = this.oldCart.filter(item => item.productName.indexOf(newVal) !== -1)
                console.log(res)
                this.cart = res;
            }
        }
    })
</script>